<template>
  <div class="pie-wrap">
    <div class="echarts">
      <div :style="{height:'330px',width:'100%'}" ref="myEchart"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import { mapActions,mapState } from "vuex";
export default {
  props: {
    userJson: {
      type: Object,
      default: () => {
        return {};
      }
    },
    color: {
      type: String,
      default: "#8C9DFC"
    }
  },
  computed: {
    ...mapState({
      allCollege: state => state.home.allCollege,
      teacherRatio:state => state.home.teacherRatio
    }),
    countData(){
      let arr = []
      this.teacherRatio.forEach((v)=>{
        let item = {
          value:v.count,
          name:v.name
        }
        arr.push(item)
      })
      return arr
    },
    legendData(){
      let arr = []
      this.teacherRatio.forEach((v)=>{
        arr.push(v.name)
      })
      return arr
    }
    },
  data() {
    return {
      chart: null
    };
  },
  components: {},
  async mounted() {
    await this.getTeacherRatio()
    this.pieConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    ...mapActions({
      getTeacherRatio:"home/getTeacherRatio"
    }),
    pieConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      //window.onresize = myChart.resize;
      myChart.setOption({
        backgroundColor: "#fff",
        title: {
          text: "",
          subtext: "",
          x: "center",
          textStyle: {
            //文字颜色
            color: "#666"
            // //字体风格,'normal','italic','oblique'
            // fontStyle:'normal',
            // //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            // fontWeight:'bold',
            // //字体系列
            // fontFamily:'sans-serif'
            // //字体大小
            // fontSize:18
          },
          subtextStyle: {} //与textStyle类似
        },

        color: ["#006ce1", "#55c8f4", "#cad8f5","#bdf7c9",
          "#fc9970",
          "#97dcf6",
          "#519ef1",
          "#b1a4f6",], //饼图颜色

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        legend: {
          orient: "horizontal",
          x: "center",
          y: "bottom",
          itemWidth: 24,
          itemHeight: 12,
          data: this.legendData,
          textStyle: {
            color: "#666"
          }
        },
        //graphic是原生图形元素组件,可以支持的图形元素包括image, text, circle等等 除了下面的属性之外,还有onclick: function () {...}属性,具体的可参照echarts文档

        graphic: {
          type: "text",
          // 这是四个相对于父元素的定位属性，每个属性可取『像素值』或者『百分比』或者 'center'/'middle'。
          // right: 10,
          // bottom: '10%',
          left: "center", // 相对父元素居中
          top: "middle", // 相对父元素居中
          //可设置颜色 字体等等
          style: {
            fill: "#666", //text颜色
            text: "",
            font: "20px Microsoft YaHei"
          }
        },

        //avoidLabelOverlap:标签重叠,为true时标签拥挤重叠的情况下会挪动各个标签的位置,为false时强制所有标签放在中心位置
        //label和labelLine:当设置label的show为false时,饼图外围的标签不显示,labelLine是标签的指导线,false则不显示.
        //emphasis指的是鼠标移到饼图外围标签时,show为false的时候,标签文字不变化,当show为true时,鼠标移到饼图外围标签时,标签会变化,变化的属性在textStyle中
        series: [
          {
            center: ['50%', '38%'],
            name: "师资占比",
            type: "pie",
            //radius: ["50%", "70%"],
            radius: ["50%", "62%"],
            avoidLabelOverlap: true,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
              show: false,
              position: "outside",
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              show: false
            },
            data: this.countData
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>